<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet"
	th:href="@{/js/plugins/codemirror/lib/codemirror.css}">
<link rel="stylesheet"
	th:href="@{/js/plugins/codemirror/lib/codemirror.css}">
<style>
.webide-a {
	background-color: #337ab7;
}

.webide-a a:hover {
	color: #fff;
	background-color: #337ab7 !important;
}

.CodeMirror {
	font-size: 16px;
	width: 100%;
	height: 100%;
	/*bottom: 0;
            top: 0px;*/
	position: absolute;
}
</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<header class="main-header">
			<nav class="navbar navbar-static-top1">
				<div class="container">
					<!-- icon -->
					<div class="navbar-header">
						<a class="navbar-brand"><b>Web</b>IDE</a>
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse" data-target="#navbar-collapse">
							<i class="fa fa-bars"></i>
						</button>
					</div>

					<!-- left nav -->
					<div class="collapse navbar-collapse pull-left"
						id="navbar-collapse">
						<ul class="nav webide-a">
							<li><a href="javascript:;"> <span class="sr-only">(current)</span>

									【<font th:text="${glueDesc}"></font>】<font
									th:text="${jobInfo.jobDesc}"></font>
							</a></li>
						</ul>
					</div>

					<!-- right nav -->
					<div class="navbar-custom-menu">
						<ul class="nav navbar-nav">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown" aria-expanded="false">版本回溯<span
									class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
								     <li>
                                        <a href="javascript:;" class="source_version" version='version_now' th:attr="glueType=${jobInfo.glueType}"  >
                                            <font th:text="${glueDesc}"></font> ： <font th:text="${jobInfo.glueRemark}"></font>
                                             <textarea id="version_now" style="display:none;" th:utext="${jobInfo.glueSource}"></textarea>
                                        </a>
                                    </li>
                                    
									<li th:each="glue:${jobLogGlues}"><a href="javascript:;"
										class="source_version" th:attr="version='version_'+${glue.id},glueType=${glue.glueType}" > <font th:text="${glueDesc}"></font>：
											<font th:text="${glue.glueRemark}"></font>
									</a> <textarea th:attr="id='version_'+${glue.id}"
											style="display: none;" th:utext="${glue.glueSource}"></textarea>
									</li>
								</ul></li>
							<li id="save"><a href="javascript:;"> <i
									class="fa fa-fw fa-save"></i>保存
							</a></li>
						</ul>
					</div>

				</div>
			</nav>
		</header>

		<div class="content-wrapper" id="ideWindow">
			<div id="glueSource" style="display: none;"
				th:text="*{jobInfo.glueSource}"></div>
		</div>
	</div>
	<!-- 保存.模态框 -->
	<div class="modal fade" id="saveModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog ">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">
						<i class="fa fa-fw fa-save"></i>保存
					</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal form" role="form">
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">源码备注*<font
								color="red">*</font></label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="glueRemark"
									placeholder="请输入源码备注" maxlength="64">
							</div>
						</div>
						<hr>
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-6">
								<button type="button" class="btn btn-primary ok">保存</button>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">取消</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
<div th:include="include :: footer"></div>
<script th:src="@{/js/plugins/codemirror/lib/codemirror.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_GROOVY'}"
	th:src="@{/js/plugins/codemirror/mode/clike/clike.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_SHELL'}"
	th:src="@{/js/plugins/codemirror/mode/shell/shell.js}"></script>
<script th:if="${jobInfo.glueType =='GLUE_PYTHON'}"
	th:src="@{/js/plugins/codemirror/mode/python/python.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_PHP'}"
	th:src="@{/js/plugins/codemirror/mode/php/php.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_PHP'}"
	th:src="@{/js/plugins/codemirror/mode/clike/clike.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_NODEJS'}"
	th:src="@{/js/plugins/codemirror/mode/javascript/javascript.js}"></script>
<script th:if="${jobInfo.glueType == 'GLUE_POWERSHELL'}"
	th:src="@{/js/plugins/codemirror/mode/powershell/powershell.js}"></script>
<script th:src="@{/js/plugins/codemirror/addon/hint/show-hint.js}"></script>
<script th:src="@{/js/plugins/codemirror/addon/hint/anyword-hint.js}"></script>

<script>
var jobLogGlues = '[[${jobLogGlues}]]';
var id = '[[${jobInfo.id}]]';
	var glueSource = $("#glueSource").text();
	var glueType = '[[${jobInfo.glueType}]]';
	var ideMode = 'text/x-java';
	if(glueType == 'GLUE_GROOVY'){
		ideMode = 'text/x-java';
	}else if(glueType == 'GLUE_SHELL'){
		ideMode = 'text/x-sh';
	}else if(glueType == 'GLUE_PYTHON'){
		ideMode = 'text/x-python';
	}else if(glueType == 'GLUE_PHP'){
		ideMode = 'text/x-php';
	}else if(glueType == 'GLUE_NODEJS'){
		ideMode = 'text/javascript';
	}else if(glueType == 'GLUE_POWERSHELL'){
		ideMode = 'powershell';
	}
	var prefix = ctx + "job/jobcode";
	// init code editor
	var codeEditor;
	function initIde(glueSource) {
		if (codeEditor == null) {
            codeEditor = CodeMirror(document.getElementById("ideWindow"), {
                mode : ideMode,
                lineNumbers : true,
                matchBrackets : true,
                value: glueSource
            });
		} else {
            codeEditor.setValue(glueSource);
		}
	}
	initIde(glueSource);

	// code change
	$(".source_version").click(function(){
		var sourceId = $(this).attr('version');
		var temp = $( "#" + sourceId ).val();

		//codeEditor.setValue('');
		initIde(temp);
	});
	
	// code source save
	$("#save").click(function() {
		$('#saveModal').modal({backdrop: false, keyboard: false}).modal('show');
	});

	$("#saveModal .ok").click(function() {
	    var glueSource = codeEditor.getValue();
		var glueRemark = $("#glueRemark").val();
		
		if (!glueRemark) {
			$.modal.alertWarning("请输入源码备注");
			return;
		}
		if (glueRemark.length <4 || glueRemark.length > 100) {
			$.modal.alertWarning("源码备注长度限制为4~100");
			return;
		}

		$.ajax({
			type : 'POST',
			url : prefix + '/save',
			data : {
				'id' : id,
				'glueSource' : glueSource,
				'glueRemark' : glueRemark
			},
			dataType : "json",
			success : function(result){
				if (result.code == 0) {
                    window.parent.$.modal.msgSuccess(result.msg);
                    $('#saveModal').modal('hide');
            		window.location.reload();
				} else {
					window.parent.$.modal.msgError(result.msg);
				}
			}
		}); 

	});
</script>
</html>